<template>
  <div class="person">
    <h3>ID: {{ personInfo.id }}</h3>
    <h3>姓名: {{ personInfo.name }}</h3>
    <h3>年龄: {{ personInfo.age }}</h3>
    <hr>
    <ul>
      <li v-for="(item,index) in personInfoList" :key="item.id">
        <h3>ID: {{ item.id }}</h3>
        <h3>姓名: {{ item.name }}</h3>
        <h3>年龄: {{ item.age }}</h3>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
// 引入由TS定义的数据类型时需要再类型前面加上关键字type
import { type Person, type PersonList } from '@/type';  //如果不加type会漂红报错，主要是怕引入的人使用错误
// console.log('看看person',Person);   //报错！，因为“Person”仅表示类型，但在此处却作为值使用。
let personInfo: Person = { id: 'zhangsan', name: '张三', age: 18 }
let personInfoList: PersonList = [
  { id: 'lisi', name: '李四', age: 28 },
  { id: 'wangwu', name: '王五', age: 38 }
]

</script>
<style>
button {
  margin-left: 10px;
}
</style>